<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        样式冲突
        通过不同的选择器，选择了相同的元素，并且为相同的样式设置不的值
        由选择器的优先级决定
        权重由高-->低
        内联（1000） > id （100）> 类和伪类 （10） > 元素 （1）
        比较优先级时，需要将所有的选择器的优先级进行相加计算
        最后优先级越高，则优先显示，不能相加，
        注意：1、分组选择器单独计算  
             2、类选择器再高也不会超过id选择器，不能跨越层级
             3、如果优先级相同，则显示后声明即行高大的选择器
             4、通配选择器的优先级为0
             5、继承的样式，没有优先级
        可以在某一个样式后面添加 !important 则该样式的优先级将被设置为最高，甚至高于内联样式
        注意，要慎用

         */
        .red{
            color: red;
        }
        .dl{
            color: purple !important;
        }
        div{
            color: yellow;
            font-size: 20px;
        }

        #box{
            color: orange;
        }

        div#box{
            color: cyan;
        }

        *{
            font-size: 50px;
        }
       
    </style>
</head>
<body>

    <div  id="box" class="red dl" style="color:chartreuse ;">我是一个div
        <span>
            我是div里的span
        </span>
    </div>
    
</body>
</html>